<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{total_price}}</text></view>
				</view>
			</tui-list-cell>
			<radio-group @change="checks">
				
					<tui-list-cell unlined v-if="total_price>0">
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" value="1" checked="checked"></radio>
						</view>
					</label>
				</tui-list-cell >
				
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text v-if="balance-total_price<0">余额（余额{{balance}}，余额不足）</text>
						<text v-else>余额（余额{{balance}}）</text>
						<view class="tui-radio" v-if="balance-total_price>0">
							<radio color="#EB0909" value="3"></radio>
						</view>
					</label>
				</tui-list-cell>

				<tui-list-cell unlined v-if="total_price>0 ">
					<label class="tui-pay-item istrue" :class="{'iswx':iswx}">
						<image src="/static/images/mall/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" value="2"></radio>
						</view>
					</label>
				</tui-list-cell>

			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="danger" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>

	</view>
</template>

<script>
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		name: 'tPayWay',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page: {
				type: Number,
				default: 1
			},
			total_price: "",
			shop_id: 0,

			out_trade_no: '',
			isth: false,
			balance: 0,
			team_balance: 0,
			paypassword: '',
			iswx: false,
		},
		data() {
			return {
				pay_type: 1,
				pay_app: 0
			};
		},
		methods: {
			wxPay(data) {
				let that = this;
				if (isWxBrowser()) {
					let obj = {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
					}

					let callback_succ_func = function() {
						that.tui.toast('支付成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 800)
					};
					let callback_error_func = function() {
						that.tui.toast('支付失败');
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					};
					wxJsPay(obj, callback_succ_func, callback_error_func)
				} else {
					uni.showModal({
						title: "提示",
						content: "请使用微信打开进行支付",
						showCancel: false
					})
				}
			},

			close() {
				this.$emit("close", {})
			},
			keyboard() {
				this.$emit("keyboard", {})
			},
			checks(e) {
				this.pay_type = e.detail.value;
			},

			btnPay() {
				//#ifdef APP-PLUS
				 this.pay_app=1;
				//#endif
				if(this.total_price==0){
					this.pay_type=3;
				}
				let token = this.tui.getToken();
				var pays = {
					token: token,
					pay_type: this.pay_type,
					out_trade_no: this.out_trade_no,
					pay_app: this.pay_app,	
					// paypassword:this.paypassword
				}
				let paytype = this.tui.request('order', 'post', pays, 1000, 1, '', 'orderPay');
				Promise.resolve(paytype).then((value) => {
					
					if (this.pay_type == 2 || this.pay_type == 5) {
						
						/* 假如是app的话 */
						//#ifdef APP-PLUS
						plus.runtime.openURL(
							value.data.url
						);
						return;
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: value.data,
							success: function(res) {
				
							},
							fail: function(err) {
				
							}
						});
						return;
						//#endif
						// #ifdef H5
						location.href = value.data.url;
						return;
						//将接口返回的Form表单显示到页面
						// document.querySelector('body').innerHTML = value;
						// //调用submit 方法
						// document.forms['alipaysubmit'].submit();
						return;
						// #endif
					}
				
					if (value.code == 200) {
						
						this.close();
						if (this.pay_type == 3) {
							uni.navigateTo({
								url: "/pages/success/success?out_trade_no=" + this.out_trade_no
							})
							return;
						}
						
						if (this.pay_type == 4) {
							uni.navigateTo({
								url: "/pages/success/success?out_trade_no=" + this.out_trade_no
							
							})
							return;
						}
						// #ifdef H5
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							//公众号支付
							this.wxPay(value.data);
							return;
						}
						
						//#endif
						//#ifdef APP-PLUS
					
					       plus.runtime.openURL(value.data.openlink);
						return;
						//#endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appid: value.data.appId,
							timeStamp: value.data.timeStamp,
							nonceStr: value.data.nonceStr,
							package: value.data.package,
							signType: 'MD5',
							paySign: value.data.paySign,
							success: (res) => {
								uni.showToast({
									title: "支付成功!"
								})
								uni.navigateTo({
									url: "/pages/success/success?out_trade_no=" + this.out_trade_no
								})
							},
							fail: (res) => {
								this.tui.toast("取消支付");
								uni.navigateTo({
									url: "/pages/success/success?out_trade_no=" + this.out_trade_no
								})
							},
							complete: () => {
				
							}
						})
						// #endif
						// #ifdef H5
						  location.href = value.data.openlink;
						  return;
						// #endif
					} else {
						if(value.code==40005){
							this.keyboard();
						}
						this.tui.toast(value.message);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.istrue {
		display: block;
	}

	.tui-pay-amuont {
		color: #eb0909;
		font-weight: 500;
		font-size: 34rpx;
	}

	.iswx {
		display: none !important;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>